/*
 * @Description: 缺省
 * @Author: kanglin
 * @Date: 2018-09-20 11:18:55
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    .v-com-empty{
		position: relative;
		background: #ffffff;
        .icon{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            &>image{
                width: 100%;
			}
			min-width: 140px;
		}
		.tips{
			text-align: center;
			margin-top: 10px;
			color: #83c0fd;
			font-size: 14px;
			// min-width: 140px;
			// white-space: nowrap;
		}
    }
</style>

<template>
	<div
		:style="getComStyle"
		class="v-com-empty" >
		<div
			:style="getIconStyle"
			class="icon">
			<img
				:src="default_image"
				alt="">
			<p class="tips">{{ tips }}</p>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Empty',
	props: {
		imageWidth: {
			type: Number,
			default() {
				return 300;
			},
		},
		width: {
			type: Number,
			default() {
				return 0;
			},
		},
		height: {
			type: Number,
			required: true,
		},
		tips: {
			type: String,
			default() {
				return this.$t('common.empty_date_tips');
			},
		},
	},
	data() {
		return {
			default_image: require('src/assets/img/shuju_wushuju_icon.svg'),
		};
	},
	computed: {
		getIconStyle() {
			return {
				width: `${this.imageWidth}px`,
			};
		},
		getComStyle() {
			return {
				width: this.width ? `${this.width}px` : 'auto',
				height: `${this.height}px`,
			};
		},
	},
	methods: {},
};
</script>
